<template>
	<view class="home">
		<view class="flex align-center padding-tb-20 padding-lr-30">
			<view class="searchbg">
				<text class="tyIcon-search text-66"></text>
				<input type="text" placeholder="搜索游戏名称" v-model="title" class="flex-one margin-left-20 text-32"
					confirm-type='search' @confirm="getgamesearch" />
			</view>
			<view class="sort-item flex align-center margin-left-30" @click="is_filter=true">
				<view class="text-28">筛选</view>
				<image src="/static/board/xiala.png" mode="" class="xialaimg margin-left-10"></image>
			</view>
		</view>
		<view class="padding-left-30">
			<ty-tab-transverse-scroll :list="tabsList" :list-key="listKey" :active.sync="tabsIndex" @click="changeTabs"
				lineColor='#111111'>
			</ty-tab-transverse-scroll>
		</view>
		<view class="flex justify-between flex-wrap margin-top-50 margin-lr-30">
			<view class="width-330 bg-ff radius-40 margin-bottom-40"
				style="box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176,181,185,0.25);" v-for="(item,index) in list"
				:key="index" @click="go('/pages/board/gamedetail?id='+item.id)">
				<image :src="item.image_url" mode="" class="gameimg"></image>
				<view class="padding-tb-20 padding-lr-30">
					<view class="text-cut-one text-28 text-bold">{{item.title}}</view>
					<view class="text-24 text-66 margin-top-5">游玩人数：{{item.player_count}}人</view>
					<view class="text-24 text-66 margin-top-5">类型：{{item.typename}}</view>
				</view>
			</view>
		</view>
		<!-- 浮层 -->
		<view class="layer" v-if="is_filter" @click="is_filter=false">
			<view class="bg-ff" @click.stop="">
				<view class="flex align-center padding-tb-20 padding-lr-30">
					<view class="searchbg">
						<text class="tyIcon-search text-66"></text>
						<input type="text" placeholder="搜索游戏名称" class="flex-one margin-left-20 text-32" />
					</view>
					<view class="sort-item flex align-center margin-left-30">
						<view class="text-28">筛选</view>
						<image src="/static/board/xiala.png" mode="" class="xialaimg margin-left-10 shangla"></image>
					</view>
				</view>
				<view class="flex">
					<view class="leftbg">
						<view :class="cateindex==index?'catebtn_active':'catebtn'" v-for="(item,index) in catelist"
							:key="index" @click="getCate(index)">{{item.name}}</view>
					</view>
					<view class="flex-one">
						<scroll-view scroll-y="true" class="catebg">
							<view v-for="(item,index) in secondlist" :key="index" class="flex align-center padding-30"
								@click="getSecond(item.id)" v-if="cateindex==1">
								<view class="select" :class="seconid==item.id?'tyIcon-round-check':''"></view>
								<view class="text-26 margin-left-30">{{item.name}}</view>
							</view>
							<view v-for="(item,index) in numlist" :key="index" class="flex align-center padding-30"
								@click="getNum(item)" v-if="cateindex==0">
								<view class="select" :class="num==item?'tyIcon-round-check':''"></view>
								<view class="text-26 margin-left-30">{{item}}</view>
							</view>
						</scroll-view>
						<view class="subbtn" @click="getSearch">确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [],
				tabsIndex: 0,
				// 显示key
				listKey: 'type',
				tabsid: "",
				catelist: [{
						name: '游戏人数',
					},
					{
						name: "类型",
					}
				],
				cateindex: 0,
				secondlist: [],
				numlist: [],
				seconid: "",
				is_filter: false,
				num: "",
				list: [],
				title:""
			}
		},
		onReady() {
			this.rq.getData('game/num_list', {
				shop_id: uni.getStorageSync('store_id'),
			}).then(res => {
				if (res.code == 1) {
					this.numlist = res.data
				}
			})
			this.rq.getData('game/category', {
				shop_id: uni.getStorageSync('store_id'),
			}).then(res => {
				if (res.code == 1) {
					this.secondlist = res.data
				}
			})
			this.rq.getData('game/type', {
				shop_id: uni.getStorageSync('store_id'),
			}).then(res => {
				if (res.code == 1) {
					this.tabsList = res.data
					this.tabsid = res.data[0].id
					this.loadList(1)
				}
			})

		},
		methods: {
			changeTabs(e) {
				this.tabsid = this.tabsList[e.index].id
				// if (e.index == 1) {
				this.loadList(1)
				// }
			},
			getgamesearch(){
				this.loadList(1)
			},
			getSecond(id) {
				this.seconid = this.seconid == id ? '' : id
			},
			getNum(i) {
				this.num = this.num == i ? '' : i
			},
			getCate(index) {
				this.cateindex = index
			},
			loadList(isFirstPage) {
				var that = this
				that.rq.getList('game/game_list', {
					title: this.title,
					categoty_id: this.tabsid,
					player_count: this.num,
					type_id: this.seconid,
					shop_id: uni.getStorageSync('store_id'),
				}, {
					that: that,
					first_page: isFirstPage
				})
			},
			getSearch() {
				this.is_filter = false
				this.loadList(1)
			}
		},
		onReachBottom() {
			this.loadList(0)
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
	}

	.searchbg {
		flex: 1;
		height: 80rpx;
		background: #F3F3F3;
		border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.xialaimg {
		width: 20rpx;
		height: 20rpx;
	}

	.width-330 {
		width: 330rpx;
	}

	.gameimg {
		width: 330rpx;
		height: 278rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}

	.leftbg {
		width: 148rpx;
		height: 584rpx;
		background: #F3F5F7;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.catebtn {
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.catebtn_active {
		font-weight: bold;
		background: #fff;
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
	}

	.catebg {
		width: 100%;
		height: 450rpx;
	}

	.select {
		width: 26rpx;
		height: 26rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #999999;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.subbtn {
		width: 472rpx;
		height: 88rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 0 auto;
	}

	.shangla {
		transform: rotate(180deg);
	}
</style>